<template>
  <v-form ref="form" class="form px-7 pt-6 pb-14">
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> Job Type </v-col>
      <v-col :cols="8" class="text-left">
        <v-card flat width="37.5%">
          <v-text-field
            v-model="type"
            v-validate="'required'"
            name="Job Type"
            solo
            hide-details
            dense
            class="white-input"
          >
          </v-text-field>
        </v-card>
        <span class="vee-validate-error">
          {{ errors.first("Job Type") }}
        </span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> Team Description </v-col>
      <v-col :cols="8" class="text-left">
        <v-text-field
          v-model="description"
          v-validate="'required'"
          name="Team Description"
          solo
          hide-details
          dense
          class="white-input"
        >
        </v-text-field>
        <span class="vee-validate-error">
          {{ errors.first("Team Description") }}
        </span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> Est Time (min) </v-col>
      <v-col :cols="8" class="text-left">
        <v-card flat width="37.5%">
          <v-text-field
            v-model.number="estTime"
            v-validate="'required'"
            name="Est Time (min)"
            min="0"
            type="number"
            solo
            hide-details
            dense
            class="white-input"
          >
          </v-text-field>
        </v-card>
        <span class="vee-validate-error">
          {{ errors.first("Est Time (min)") }}
        </span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> Prompt before starting (min) </v-col>
      <v-col :cols="8" class="text-left">
        <v-card flat width="37.5%">
          <v-text-field
            v-model.number="PBS"
            v-validate="'required'"
            name="Prompt before starting (min)"
            min="0"
            type="number"
            solo
            hide-details
            dense
            class="white-input"
          >
          </v-text-field>
        </v-card>
        <span class="vee-validate-error">
          {{ errors.first("Prompt before starting (min)") }}
        </span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> First reminder </v-col>
      <v-col :cols="8" class="text-left">
        <v-card flat width="37.5%">
          <v-text-field
            v-model.number="firstReminder"
            v-validate="'required'"
            name="First reminder"
            min="0"
            type="number"
            solo
            hide-details
            dense
            class="white-input"
          >
          </v-text-field>
        </v-card>
        <span class="vee-validate-error">
          {{ errors.first("First reminder") }}
        </span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> Second reminder </v-col>
      <v-col :cols="8" class="text-left">
        <v-card flat width="37.5%">
          <v-text-field
            v-model.number="secondReminder"
            v-validate="'required'"
            name="Second reminder"
            min="0"
            type="number"
            solo
            hide-details
            dense
            class="white-input"
          >
          </v-text-field>
        </v-card>
        <span class="vee-validate-error">
          {{ errors.first("Second reminder") }}
        </span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> PIC </v-col>
      <v-col :cols="8" class="text-left">
        <v-card class="d-flex align-center" flat width="calc(75% + 32px)">
          <v-text-field
            v-model="PIC"
            v-validate="'required'"
            name="PIC"
            solo
            hide-details
            dense
            class="white-input"
          >
          </v-text-field>
          <v-icon class="ml-2" color="#79839B">mdi-magnify</v-icon>
        </v-card>
        <span class="vee-validate-error">
          {{ errors.first("PIC") }}
        </span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> Job JS Code </v-col>
      <v-col :cols="8" class="text-left">
        <v-card flat width="75%">
          <v-text-field
            v-model="jobJSCode"
            v-validate="'required'"
            name="Job JS Code"
            solo
            hide-details
            dense
            class="white-input"
          >
          </v-text-field>
        </v-card>
        <span class="vee-validate-error">
          {{ errors.first("Job JS Code") }}
        </span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> Task JS Code </v-col>
      <v-col :cols="8" class="text-left">
        <v-card flat width="75%">
          <v-text-field
            v-model="taskJSCode"
            v-validate="'required'"
            name="Task JS Code"
            solo
            hide-details
            dense
            class="white-input"
          >
          </v-text-field>
        </v-card>
        <span class="vee-validate-error">
          {{ errors.first("Task JS Code") }}
        </span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> Job Code Prefix </v-col>
      <v-col :cols="8" class="text-left">
        <v-card flat width="37.5%">
          <v-text-field
            v-model="jobCodePrefix"
            v-validate="'required'"
            name="Job Code Prefix"
            solo
            hide-details
            dense
            class="white-input"
          >
          </v-text-field>
        </v-card>
        <span class="vee-validate-error">
          {{ errors.first("Job Code Prefix") }}
        </span>
      </v-col>
    </v-row>
  </v-form>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import VForm from "vuetify/src/components/VForm/index";
import { Pick } from "@/common/constants/Utils";
@Component({
  components: {},
})
export default class AddEditJob extends Vue {
  id: string | null = "";
  type: string | null = "";
  description: string | null = "";
  estTime: number | null = null;
  PBS: number | null = null;
  firstReminder: number | null = null;
  secondReminder: number | null = null;
  PIC: string | null = "";
  jobJSCode: string | null = "";
  taskJSCode: string | null = "";
  jobCodePrefix: string | null = "";

  resetForm() {
    this.id = null;
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }

  setFormData(formData: object) {
    Object.assign(this, formData);
  }

  getFormData() {
    return Pick(this, [
      "id",
      "type",
      "description",
      "estTime",
      "PBS",
      "firstReminder",
      "secondReminder",
      "PIC",
      "jobJSCode",
      "taskJSCode",
      "jobCodePrefix",
    ]);
  }

  async validateFormData() {
    const valid = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Maintenance/Dialog/DialogForm.scss";
</style>
